<template>
	<div v-if="isShow">
		<view class="wrap-user-sign" @click="onDismiss" @click.stop.prevent @touchmove.stop.prevent>
			<view class="sign-white" @click.stop.prevent>
				<image class="close" :src="getImageURL('common/close.png')" @click="onDismiss" />

				<view class="title f-36 fBold"> 客户标签 </view>

				<scroll-view class="scroll safe-area" scroll-y>
					<block v-for="(item, index) in 10" :key="index">
						<view class="item">
							<view class="sign-title f-28 fBold"> 普通标签 </view>

							<view class="list flex">
								<block v-for="(sign, idx) in 5" :key="idx">
									<view class="sign-item f-24"> 标签 </view>
								</block>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 是否显示弹窗
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {};
		},
		methods: {
			/**
			 * 关闭弹窗
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-user-sign {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 200;
		background-color: rgba(0, 0, 0, 0.5);

		.sign-white {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: white;
			z-index: 201;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;

			.close {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 40rpx;
				height: 40rpx;
				z-index: 202;
			}

			.title {
				margin-top: 40rpx;
				width: 100%;
				text-align: center;
				color: $title-color;
			}

			.scroll {
				margin-top: 36rpx;
				width: 100%;
				overflow: hidden;
				height: 500rpx;
				padding: 0 40rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					overflow: hidden;
					margin-bottom: 10rpx;

					.sign-title {
						color: $title-color;
					}

					.list {
						margin-top: 30rpx;
						margin-left: -40rpx;
						width: calc(100% + 40rpx);
						overflow: hidden;
						flex-wrap: wrap;

						.sign-item {
							margin-left: 40rpx;
							margin-bottom: 30rpx;
							overflow: hidden;
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
							overflow: hidden;
							border-radius: 23rpx;
							background-color: rgba($color: $theme-color, $alpha: 0.26);
							color: $theme-color;
							padding: 0 22rpx;
						}
					}
				}
			}
		}
	}
</style>
